<template>
  <div class="PersonIndexWork tPage">
    <EditBan @showworkgroup="showWorkGroup"  :is_me="dUserinfo.is_me">
      <span slot="subtitle">{{WorksGroupCount}}个专辑</span>
    </EditBan>
    <div v-if="SetToTopWorkInfo">
      <ImageBlock  loadingType="loading_width" @click.native="gotoUrl(domain+'/MinProgram2/Work/detail_o?work_id='+SetToTopWorkInfo.works_id)" class="SetTopWork" :img-src="domain+'/Uploads'+SetToTopWorkInfo.m_path" width="100%" height="auto" ref="SetTopWork"></ImageBlock>
      <div style="height: .6rem">
<!--        <SetTop style="left: 8.2rem" v-if="!dUserinfo.is_me">置顶</SetTop>-->
<!--        <SetTop style="left: 7.7rem" v-if="dUserinfo.is_me" @click.native="CancelSetToTop">取消置顶</SetTop>-->
        <i class="fa fa-arrow-up pull-right" v-if="!dUserinfo.is_me"> 置顶</i>
        <i class="fa fa-arrow-down pull-right" v-if="dUserinfo.is_me"  @click="CancelSetToTop"> 取消置顶</i>
      </div>
    </div>

    <div class ="flex">
      <div class="flex-item">
        <div class="shadow" :class="v.is_view!==1?'mohu':''" v-for="(v,k) in dataList" v-if="k%2==0">
          <ImageBlock class="ImageBlock" :img-src="domain+'/Uploads'+v.m_path" width="100%" height="auto" @click.native="gotoUrl(domain+'/MinProgram2/Work/detail_o?work_id='+v.works_id)">
            <div slot="rightTop" v-if="dUserinfo.is_me">
              <div class="setTop">
                <i class="fa fa-arrow-up"  @click.stop="SetToTop(v.works_id)"></i>
              </div>
            </div>
            <span slot="leftBottom" v-if="!dUserinfo.is_me">
              <i class="fa fa-eye visit_count"> {{v.counts}}</i>
            </span>
          </ImageBlock>
          <div>{{v.works_title}}</div>
          <OpEditDel v-if="dUserinfo.is_me"
                     @editDo="gotoUrl(domain+'/MinProgram2/Work/upload/works_id/'+v.works_id)"
                     @deleteDo="deleteDo(v.works_id,v.works_title)"
                     @viewChangeDo="viewChangeDo(v.works_id)"
                     :is-view="v.is_view"
          ></OpEditDel>
        </div>
      </div>
      <div class="flex-item">
        <div class="shadow"  :class="v.is_view!==1?'mohu':''" v-for="(v,k) in dataList" v-if="k%2==1">
          <ImageBlock class="ImageBlock" :img-src="domain+'/Uploads'+v.m_path" width="100%" height="auto" @click.native="gotoUrl(domain+'/MinProgram2/Work/detail_o?work_id='+v.works_id)">
            <div slot="rightTop" v-if="dUserinfo.is_me">
              <div class="setTop">
                <i class="fa fa-arrow-up"  @click.stop="SetToTop(v.works_id)"></i>
              </div>
            </div>
            <span slot="leftBottom" v-if="!dUserinfo.is_me">
              <i class="fa fa-eye visit_count"> {{v.counts}}</i>
            </span>
          </ImageBlock>
          <div>{{v.works_title}}</div>
          <OpEditDel v-if="dUserinfo.is_me"
                     @editDo="gotoUrl(domain+'/MinProgram2/Work/upload/works_id/'+v.works_id)"
                     @deleteDo="deleteDo(v.works_id,v.works_title)"
                     @viewChangeDo="viewChangeDo(v.works_id)"
                     :is-view="v.is_view"
          ></OpEditDel>
        </div>
      </div>
    </div>
    <GetMore @getmore="get_worklist" ref="GetMore" :getDataListDoing="getDataListDoing"></GetMore>
  </div>
</template>
<script type="text/javascript">
import EditBan from "@/components/workgroup/EditBan"
import ImageBlock from "../../components/images/ImageBlock";
import OpEditDel from "../../components/buttons/OpEditDel";
import SetTop from "../../components/buttons/SetTop";
import GetMore from "../../components/buttons/GetMore";
 export default {
   name:"Work",
   data(){
     return {
       dUserinfo:[],
       dataList:[],
       SetToTopWorkInfo:null,
       page:1,
       WorksGroupCount:0,
       getDataListDoing:0,
       getDataListDoingCount:0
     }
   },
   created() {
     let _this=this
     _this.dataList=[]
     _this.$nextTick(function(){
       $(window).scroll(function(){
         if (_this.$route.name!==_this.$options.name)return false
         let scrollTop = $(this).scrollTop();
         let scrollHeight = $(document).height();
         let windowHeight = $(this).height();
         if(scrollHeight - (scrollTop + windowHeight) < 100){
           console.log("you are in the bottom "+_this.$options.name);
           _this.get_worklist()
         }
       })
     })
   },
   destroyed() {
     console.log("des");
   },
   methods:{
     viewChangeDo(works_id){
       let _this = this
       //alert(works_id)
       myjs.viewChangeDo({id:works_id},function(data){
         if (data.status){
           for (let i = 0; i < _this.dataList.length; i++) {
             if (parseInt(_this.dataList[i].works_id)== parseInt(works_id)){
               _this.$set(_this.dataList[i],'is_view',data.data)
             }
           }
         }else{
           alert("操作失败")
         }
       },function(data){
         console.log(data);
         alert("操作失败")
       })
     },
     deleteDo(works_id,works_title){
       let _this = this
       if (!confirm("确定删除作品："+works_title+"?"))return false;
       myjs.delWorks({id:works_id},function(){
         for (let i = 0; i < _this.dataList.length; i++) {
           if (parseInt(_this.dataList[i].works_id)== parseInt(works_id)){
             _this.dataList.splice(i,1)
           }
         }
       },function(data){
         console.log(data);
         alert("删除失败")
       })
     },
     SetToTop(work_id){
       let _this = this
       myjs.WorksTopSetOne({uid:_this.dUserinfo.uid,work_id:work_id},function(){
         for (const v of _this.dataList) {
           if (v.works_id==work_id){
             _this.SetToTopWorkInfo = v
             break
           }
         }
       },function(){
         alert('置顶失败')
       })

     },
     CancelSetToTop(){
       let _this = this
       myjs.WorksCancelSetToTop({uid:_this.dUserinfo.uid},function(){
         _this.SetToTopWorkInfo = null
       },function(){
         alert('取消失败')
       })

     },
     showWorkGroup(){
       this.$router.push({name:"WorkGroup"})
     },
     get_worklist(){
       let _this = this
       if (_this.getDataListDoingCount>3)return false
       if (!_this.dUserinfo.uid)return false;
       if (_this.getDataListDoing)return false;
       _this.getDataListDoing=1
       let p = {uid:_this.dUserinfo.uid,page:_this.page,is_view:-1}
       myjs.get_worklist(p,function(data){
         _this.dataList=_this.dataList.concat(data.data)
         _this.page++
         _this.getDataListDoing=0
       },function(){
         _this.getDataListDoingCount++
         _this.$refs.GetMore.setNoMore()
         _this.getDataListDoing=0
       })
     },
     WorksTopgetOneWorkByUid(){
       let _this = this
       if (!_this.dUserinfo.uid)return false;
       myjs.WorksTopgetOneWorkByUid({uid:_this.dUserinfo.uid},function(data){
         _this.SetToTopWorkInfo = data.data
       })
     },
     WorksGroupGetCountByUid(){
       let _this = this
       myjs.WorksGroupGetCountByUid({uid:_this.dUserinfo.uid},function(data){
         _this.WorksGroupCount=data.data
       })
     }
   },
   mounted() {
     let _this=this
     setTimeout(function(){
       _this.dUserinfo = _this.$store.getters.getUserinfo
       if (!_this.dUserinfo){
         _this.$router.push({name:"PersonIndex"})
       }
       _this.get_worklist()
       _this.WorksTopgetOneWorkByUid()
       _this.WorksGroupGetCountByUid()
     },500)
   },
   components:{SetTop, OpEditDel, ImageBlock, EditBan,GetMore}
}
</script>
<style scoped>
.dataList{flex-wrap: wrap;justify-content: space-between}
.dataList>li{max-width: 4.6rem;min-width: 4.6rem;margin-top: .2rem}
.setTop{
  display: block;
  width: 1rem;height: .7rem;
  padding: 0;
  text-align: center;
  background: linear-gradient(#ffffff, #9aeeee) ;
  border-radius: 0px 0px 4px 4px;
}
.visit_count{color: #fff;position: absolute;left: 0;bottom: 0;font-size: .4rem;padding: .03rem .3rem .03rem .1rem;
  background: linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,.1));
  width: 3rem;height:.5rem; text-align: left;
}
.ImageBlock{transform: scale(.9)}
.SetTopWork{margin-top: .5rem}
  .mohu{opacity: .6}
</style>

